<template>
  <div>
    <a-list :data-source="data">
      <a-list-item slot="renderItem" slot-scope="item">
        <a-list-item-meta description="mock data... order info">
          <a slot="title" :href="item.href">{{ item.title }}</a>
        </a-list-item-meta>
        <div><a href="#" @click="handleClick">继续认证</a></div>
      </a-list-item>
    </a-list>

    <a-modal
      width="800px"
      title="user center"
      :visible="visible"
      :destroy-on-close="true"
    >
      <iframe
        style="display: block; width: 100%; height: 300px;"
        id="userCenterIframe"
        src="http://127.0.0.1:5500/test.html?code=123456"
      />
    </a-modal>
  </div>
</template>

<script>
const data = [
  {
    title: '订单 1'
  },
  {
    title: '订单 2'
  },
  {
    title: '订单 3'
  },
  {
    title: '订单 4'
  }
];

export default {
  name: 'Dashboard',
  data () {
    return {
      visible: false,
      data,
      text: '',
      info: null
    };
  },
  methods: {
    handleIncomingMessage (event) {
      console.log(event.data);
    },
    handleClick () {
      this.visible = true;
      this.text = '加载中...';
      setTimeout(() => {
        this.info = {
          code: '123456',
          data: {
            id: 100,
            key1: '123',
            key2: '123',
            key3: '123'
          }
        };
        this.$nextTick(() => {
          const iframe = document.getElementById('userCenterIframe');
          iframe.addEventListener('load', () => {
            iframe.contentWindow.postMessage(this.info, '*');
            this.text = '';
          });
        });
      }, 1000);
    }
  },
  mounted () {
    window.addEventListener('message', this.handleIncomingMessage, false);
  }
};
</script>

<style scoped>

</style>
